<template>
  <div class="homelist">
    <div v-for="(item,index) in data" :key="index" class="homelist-detail" @click="checkDetail">
      <div class="homelist-title">
        <h3>{{item.title}}</h3>
      </div>
      <div class="homelist-center">
        <div><p>{{item.content}}</p></div>
        <div>
          <img :src="item.img">
        </div>
      </div>
      <div class="homelist-foot">
        <div>
          <span class="writer">{{item.writer}}</span>
          <i class="iconfont">&#xe72d;</i><span class="time">{{item.time}}</span>
        </div>
        <div>
          <i class="iconfont">&#xe634;</i><span class="like">{{item.like}}</span>
          <i class="iconfont">&#xe63e;</i><span class="message">{{item.message}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'HomeList',
  data(){
    return{
      
    }
  },
  methods:{
    checkDetail(event){
      // window.location.href = "http://m.duwenzhang.com/index.php?action=article&id=328479"
      // this.$router.push("HomeDetails")
    }
  },
  props:{
    data:{
      type:Array,
      default:function(){
        return [];
      }
    }
  }
}
</script>

<style scoped>
.homelist{
  font-size: 0.12rem;  
}
.homelist-detail{
  background-color: #fff;
  margin-top: 0.05rem;
  padding: 0.15rem;
}
.homelist-detail .homelist-title{
  overflow: hidden;
}
.homelist-detail .homelist-title h3{
  letter-spacing: 2px;
  display: inline-block;
  font-size: 0.16rem;
}
.homelist-detail .homelist-center{
  display: flex;
}
.homelist-detail .homelist-center div:first-child{
  letter-spacing: 1px;
  margin-right: 0.05rem;
  flex: 2;
}
.homelist-detail .homelist-center div:last-child{
  text-align: right;
  flex: 1;
}
.homelist-detail .homelist-center img{
  width: 1.2rem;
  height: 1.2rem;
}
.homelist-foot{
  margin-top: 0.05rem;
  display: flex;
}

.homelist-foot div{
  flex: 1;
  text-align: left;
}
.homelist-foot div:last-child{
  text-align: right;
}
</style>